<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>print-test</title>
		<style>
		  .hidectx{
			  display: none;
		  }
		  @media print {
			  .no-print{display: none;} /* 不打印的元素 */
			  .print-only{display: block;} /* 仅在打印时显示的元素 */
		  }
		  
		  @media print { /* 设置分页 */
			  .break_page_before{page-break-before: always;}
			  .break_page_after{page-break-after: always;}
			  keeppagebeg,keeppageend{page-break-inside: avoid;} /* 避免在keeppagebeg,keeppageend之前分页*/
		  }
		  /* 设置打印布局， 设置无效是因为 @page 打成 ‘@apge’了 
		  @media print { 
		    @page {
			  margin: 1cm 2cm 1cm 2cm; 
			}  
		  }
		  */
		  /* 页眉 上右下左 ，不设置可以由用户在对话框中设置纸张规格，及打印方向 */
		  
			@media print {
			  /* 设置横向打印 */
			  @page {
				size: landscape;
			  }
			 
			  /* 或者设置纵向打印 */
			  /* @page {
				size: portrait;
			  } */
			}

		  /*
		    当页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，
			使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距。
		    @media print {
			  @apge{margin:0}
			  body{ margin: 1cm;}
			}
		  */
		</style>
	</head>

	<body>
		<div id="main1">
			<div class="no-print" id="top1">
				<button onclick="test1()">测试一</button>
				<button onclick="test2()">测试二</button>			
			</div>
			
			<div class="print-only" id="view1" style="border:solid thin green">
				结果显示区<br/>
JavaScript是ECMAScript的实现和扩展，ES6标准的制定也为JavaScript加入了许多新特性。本文主要记录展开运算符。

展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）
或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。
iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，
而Object尚未内置该方法，因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。
				
			</div>
            <div>
                <search onclick="alert('searching')">
                    搜索1：<input type="search" id="query" /> 结果1：
                </search>
                <hr onclick="alert('hr')">aaa<br onclick="alert('hr')">bbb
                <search>
                    搜索2：<input type="search" id="query" /> 结果2：
                </search>
                <label for="fuel">Fuel level:</label>
                <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">at 50/100</meter>
                FROMBEG:
                <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
                  <input type="range" name="b" value="50" /> +
                  <input type="number" name="a" value="10" /> =
                  <output name="result"></output>
                  fieldset:
                  <fieldset>
                    <legend>Choose your favorite monster</legend>

                    <input type="radio" id="kraken" name="monster" value="K" />
                    <label for="kraken">Kraken</label><br />

                    <input type="radio" id="sasquatch" name="monster" value="S" />
                    <label for="sasquatch">Sasquatch</label><br />

                    <input type="radio" id="mothman" name="monster" value="M" />
                    <label for="mothman">Mothman</label>
                  </fieldset>:fieldset                  
                </form>:ENDFROM textarea:<textarea></textarea>:textarea
                <dialog open>
                  <p>Greetings, one and all!</p>
                  <form method="dialog">
                    <button>OK</button>
                  </form>
                </dialog>
            </div>
			<div class="break_page_before" style="height:64px;">
				此标签前强制分页
                CODE等宽字体monospace: <code>var i = 123;</code>
                <span>SPAN</span>
                <footer>
                    段落脚部
                </footer>
			</div>
			<div class="break_page_after">
				此标签后强制分页--footer
			</div>
			<div >
                <ruby>
                  漢 <rt>han</rt> 字 <rt>zi</rt>
                </ruby>
				最后一页
                <ruby>
                  漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
                </ruby>
                <table border="1" style="border-collapse:collapse;" >
                    <caption>表格标题</caption>
                    <colgroup>
                        <col /><col />
                    </colgroup>
                    <thead>
                        <tr><th>头1列</th><th>头2列</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                          <td>1行1列</td><td>1行2列</td>
                        </tr>
                        <tr>
                          <td>2行1列</td><td>2行2列</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                          <td>脚1列</td><td>脚2列</td>
                        </tr>
                    </tfoot>                    
                </table>
                article:<article class="forecast">
                  <h1>Weather forecast for Seattle</h1>
                  <article class="day-forecast">
                    <h2>03 March 2018</h2>
                    <p>Rain.</p>
                  </article>
                  <article class="day-forecast">
                    <h2>04 March 2018</h2>
                    <p>Periods of rain.</p>
                  </article>
                  <article class="day-forecast">
                    <h2>05 March 2018</h2>
                    <p>Heavy rain.</p>
                  </article>
                </article>:article,figure:
                <figure>
                  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
                  <figcaption>An elephant at sunset</figcaption>
                </figure>:figure.
                Menu:
                  <menu style="list-style-type: none;">
                    <li><button id="save">Save for later</button></li>
                    <li><button id="share">Share this news</button></li>
                  </menu>:Menu Nav:
                  <nav class="crumbs">
                    <ol>
                      <li class="crumb"><a href="#">Bikes</a></li>
                      <li class="crumb"><a href="#">BMX</a></li>
                      <li class="crumb">Jump Bike 3000</li>
                    </ol>
                  </nav>:Nav
                  
			</div>
			
			<iframe id="ifr_print" class="hidectx no-print">
				
			</iframe>
		</div>
		<script type="text/javascript">
			function test1(){
				window.print();
			}
			function test2(){
				//let view1 = document.getElementById("view1");
				//view1.print();
				//打印指定标签:
				var view1 = document.getElementById("view1");
				//console.dir(view1);
				//var content = view1.innerHTML;
				var content = view1.outerHTML;
				console.log("content:",content);
				var printFrame = document.getElementById("ifr_print");
				  printFrame.contentDocument.open();
				  printFrame.contentDocument.write('<html><body>');
				  printFrame.contentDocument.write(content);
				  printFrame.contentDocument.write('</body');
				  printFrame.contentDocument.write('></html>');
				  printFrame.contentDocument.close();
				  printFrame.contentWindow.print();
			}
			
			function beforeprint(){
				console.log('beforeprint;');
				//alert('beforeprint');
			}
			function afterprint(event){
				console.log('afterprint;',event);
				//alert('afterprint');
			}
			
			
			window.addEventListener("beforeprint",beforeprint);
			window.addEventListener("afterprint",afterprint);
			
			
		</script>
	</body>

</html>
